<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/jquery.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=tQAk8cBCGKz24ekGp5Tk9Q8QUVlMA4VB"></script>
    <title>数据大屏</title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
        *{
            color: #0087FF;
            font-size:12px;
            font-family: "华文细黑";
        }
    </style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    $(function(){
        // var server_host="http://localhost:8083";
        // var server_host="http://124.128.226.225:8083";
        var server_host="https://stack.mynatapp.cc";

        var map = new BMap.Map("container", { enableMapClick:false});
        var point = new BMap.Point(117.291595,36.640627);
        map.centerAndZoom(point, 11);
        map.setMapStyle({
            styleJson:[
                // {
                //     "featureType": "road",
                //     "elementType": "all",
                //     "stylers": {
                //         // "visibility": "off",
                //     }
                // },

                {
                    "featureType": "highway",
                    "elementType": "geometry",
                    "stylers": {
                        "visibility": "off"
                    }
                },
                // {
                //     "featureType": "background",
                //     "stylers": {
                //         "color": "white",
                //         "hue": "#1a1e29"
                //     }
                // },
                {
                    "featureType": "railway",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                },
                {
                    "featureType": "local",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off"
                    }
                },
                {
                    "featureType": "water",
                    "elementType": "all",
                    "stylers": {
                        "color": "",
                        "visibility": "off"
                    }
                },
                {
                    "featureType": "poi",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off"
                    }
                }
            ]
        });
        map.enableScrollWheelZoom(true);
        $.ajax({
            url: server_host+"/blade-app/huodong/getHuodongJwdByAreaInfo?areacode=370112",
            type: "get",
            dataType: "json",
            success: function(res) {
                $.each(res, function(i, val) {
                    var point = new BMap.Point(val.lng,val.lat);
                    var myIcon ;
                    if(val.hdzt=="1"){
                        myIcon = new BMap.Icon("https://gudian-gddl.oss-cn-beijing.aliyuncs.com/bdmapicon/1.png", new BMap.Size(100,100));
                    }
                    if(val.hdzt=='2'){
                        myIcon = new BMap.Icon("https://gudian-gddl.oss-cn-beijing.aliyuncs.com/bdmapicon/2.png", new BMap.Size(100,100));
                    }
                    if(val.hdzt=='3'){
                        myIcon = new BMap.Icon("https://gudian-gddl.oss-cn-beijing.aliyuncs.com/bdmapicon/3.png", new BMap.Size(100,100));
                    }
                    var marker = new BMap.Marker(point,{icon:myIcon});

                    marker.addEventListener("click", function(e) {
                        var opts = { width: 230, height: 150 }
                        var sContent =
                            "<div>"+
                            "<h4>活动名称:"+val.hdname+"</h4>" +
                            "<h4>地址:"+val.address+"</h4>"+
                            "<h4>负责人:"+val.manager+"</h4>"+
                            "<h4>电话:"+val.phone+"</h4>"+
                            "</div>";
                        var infoWindow = new BMap.InfoWindow(sContent, opts);
                        map.openInfoWindow(infoWindow, point);
                    });
                    map.addOverlay(marker);
                });
            },
            error: function(res) {
                //$.messager.alert('错误', res.msg);
            }
        });

        $.ajax({
            url: server_host+"/blade-app/teams/getTeamsJwdByAreaInfo?areacode=370112",
            type: "get",
            dataType: "json",
            success: function(res) {
                $.each(res, function(i, val) {
                    var point = new BMap.Point(val.lng,val.lat);
                    var myIcon  = new BMap.Icon("https://gudian-gddl.oss-cn-beijing.aliyuncs.com/bdmapicon/4.png", new BMap.Size(100,100));
                    var marker = new BMap.Marker(point,{icon:myIcon});

                    marker.addEventListener("click", function(e) {
                        var opts = {
                            width: 230, // 信息窗口宽度
                            height: 150 // 信息窗口高度
                        }
                        var sContent =
                            "<div>"+
                            "<h4>团队名称:"+val.teamname+"</h4>" +
                            "<h4>所属区域:"+val.areaname+"</h4>"+
                            "<h4>负责人:"+val.teammanager+"</h4>"+
                            "<h4>电话:"+val.mangerphone+"</h4>"+
                            "</div>";
                        var infoWindow = new BMap.InfoWindow(sContent, opts);
                        map.openInfoWindow(infoWindow, point);
                    });
                    map.addOverlay(marker);
                });
            },
            error: function(res) {
                //$.messager.alert('错误', res.msg);
            }
        });

        var bdaryProvince = new BMap.Boundary();
        bdaryProvince.get("山东省济南市", function(rs){
            var count = rs.boundaries.length;
            var pointArray = [];
            for (var i = 0; i < count; i++) {
                // var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 1, strokeOpacity: 0.1, StrokeStyle: "dashed", strokeColor: "blue", fillColor: "blue", fillOpacity: 0.1 });
                //strokeColor:线颜色 strokeWeight:6线宽度 strokeStyle:"dashed" 线样式虚线实线
                //strokeColor:"blue",      //边线颜色。  strokeWeight: 1,        //边线的宽度，以像素为单位。  strokeOpacity: 0.0,     //边线透明度，取值范围0 - 1。
                //fillOpacity: 0.0,       //填充的透明度，取值范围0 - 1。  fillColor:"#4F4B4B",        //填充颜色。当参数为空时，将没有填充效果。
                var ply = new BMap.Polygon(rs.boundaries[i], {strokeColor:"blue",strokeWeight: 2,strokeStyle:"dashed", fillOpacity: 0.1 });
                map.addOverlay(ply);
                pointArray = pointArray.concat(ply.getPath());
            }
        });
        //
        //
        // var bdary = new BMap.Boundary();
        // bdary.get("济南市历下区", function(rs){
        //     var count = rs.boundaries.length;
        //     var pointArray = [];
        //     for (var i = 0; i < count; i++) {
        //         var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeOpacity: 0.5, StrokeStyle: "solid", strokeColor: "#1abc9c", fillColor: "#16a085", fillOpacity: 0.2 });
        //         map.addOverlay(ply);
        //         pointArray = pointArray.concat(ply.getPath());
        //     }
        // });
        // var bdary2 = new BMap.Boundary();
        // bdary2.get("济南市市中区", function(rs){
        //     var count = rs.boundaries.length;
        //     var pointArray = [];
        //     for (var i = 0; i < count; i++) {
        //         var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeOpacity: 0.5, StrokeStyle: "solid", strokeColor: "#1abc9c", fillColor: "#16a085", fillOpacity: 0.2 });
        //         map.addOverlay(ply);
        //         pointArray = pointArray.concat(ply.getPath());
        //     }
        // });

        // var bdary3 = new BMap.Boundary();
        // bdary3.get("济南市槐荫区", function(rs){
        //     var count = rs.boundaries.length;
        //     var pointArray = [];
        //     for (var i = 0; i < count; i++) {
        //         var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeOpacity: 0.5, StrokeStyle: "solid", strokeColor: "#1abc9c", fillColor: "#16a085", fillOpacity: 0.2 });
        //         map.addOverlay(ply);
        //         pointArray = pointArray.concat(ply.getPath());
        //     }
        // });
        // var bdary4 = new BMap.Boundary();
        // bdary4.get("济南市天桥区", function(rs){
        //     var count = rs.boundaries.length;
        //     var pointArray = [];
        //     for (var i = 0; i < count; i++) {
        //         var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeOpacity: 0.5, StrokeStyle: "solid", strokeColor: "#1abc9c", fillColor: "#16a085", fillOpacity: 0.2 });
        //         map.addOverlay(ply);
        //         pointArray = pointArray.concat(ply.getPath());
        //     }
        // });
        var bdary5 = new BMap.Boundary();
        bdary5.get("济南市历城区", function(rs){
            var count = rs.boundaries.length;
            var pointArray = [];
            for (var i = 0; i < count; i++) {
                var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeOpacity: 0.5, StrokeStyle: "solid", strokeColor: "#1abc9c", fillColor: "#16a085", fillOpacity: 0.2 });
                map.addOverlay(ply);
                pointArray = pointArray.concat(ply.getPath());
            }
        });
        // var bdary6 = new BMap.Boundary();
        // bdary6.get("济南市长清区", function(rs){
        //     var count = rs.boundaries.length;
        //     var pointArray = [];
        //     for (var i = 0; i < count; i++) {
        //         var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeOpacity: 0.5, StrokeStyle: "solid", strokeColor: "#1abc9c", fillColor: "#16a085", fillOpacity: 0.2 });
        //         map.addOverlay(ply);
        //         pointArray = pointArray.concat(ply.getPath());
        //     }
        // });
        // var bdary7 = new BMap.Boundary();
        // bdary7.get("济南市章丘区", function(rs){
        //     var count = rs.boundaries.length;
        //     var pointArray = [];
        //     for (var i = 0; i < count; i++) {
        //         var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeOpacity: 0.5, StrokeStyle: "solid", strokeColor: "#1abc9c", fillColor: "#16a085", fillOpacity: 0.2 });
        //         map.addOverlay(ply);
        //         pointArray = pointArray.concat(ply.getPath());
        //     }
        // });
        // var bdary8 = new BMap.Boundary();
        // bdary8.get("济南市平阴县", function(rs){
        //     var count = rs.boundaries.length;
        //     var pointArray = [];
        //     for (var i = 0; i < count; i++) {
        //         var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeOpacity: 0.5, StrokeStyle: "solid", strokeColor: "#1abc9c", fillColor: "#16a085", fillOpacity: 0.2 });
        //         map.addOverlay(ply);
        //         pointArray = pointArray.concat(ply.getPath());
        //     }
        // });
        // var bdary9 = new BMap.Boundary();
        // bdary9.get("济南市济阳区", function(rs){
        //     var count = rs.boundaries.length;
        //     var pointArray = [];
        //     for (var i = 0; i < count; i++) {
        //         var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeOpacity: 0.5, StrokeStyle: "solid", strokeColor: "#1abc9c", fillColor: "#16a085", fillOpacity: 0.2 });
        //         map.addOverlay(ply);
        //         pointArray = pointArray.concat(ply.getPath());
        //     }
        // });
        // var bdary10 = new BMap.Boundary();
        // bdary10.get("济南市商河县", function(rs){
        //     var count = rs.boundaries.length;
        //     var pointArray = [];
        //     for (var i = 0; i < count; i++) {
        //         var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeOpacity: 0.5, StrokeStyle: "solid", strokeColor: "#1abc9c", fillColor: "#16a085", fillOpacity: 0.2 });
        //         map.addOverlay(ply);
        //         pointArray = pointArray.concat(ply.getPath());
        //     }
        // });
        // var bdary11 = new BMap.Boundary();
        // bdary11.get("济南市莱芜区", function(rs){
        //     var count = rs.boundaries.length;
        //     var pointArray = [];
        //     for (var i = 0; i < count; i++) {
        //         var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeOpacity: 0.5, StrokeStyle: "solid", strokeColor: "#1abc9c", fillColor: "#16a085", fillOpacity: 0.2 });
        //         map.addOverlay(ply);
        //         pointArray = pointArray.concat(ply.getPath());
        //     }
        // });
        // var bdary12 = new BMap.Boundary();
        // bdary12.get("济南市钢城区", function(rs){
        //     var count = rs.boundaries.length;
        //     var pointArray = [];
        //     for (var i = 0; i < count; i++) {
        //         var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeOpacity: 0.5, StrokeStyle: "solid", strokeColor: "#1abc9c", fillColor: "#16a085", fillOpacity: 0.2 });
        //         map.addOverlay(ply);
        //         pointArray = pointArray.concat(ply.getPath());
        //     }
        // });


    })
</script>
</body>
</html>
